<template>
  <div>
    <h3>添加商品</h3>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="商品名称">
        <el-input v-model="form.name" class="input_2"></el-input>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input v-model="form.subtitle" class="input_2"></el-input>
      </el-form-item>
      <el-form-item label="所属分类">
        <el-select
          v-model="form.region"
          @change="regChange"
          placeholder="请选择一级品类"
        >
          <el-option
            v-for="(item, index) in regionList1"
            :key="index"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
        <el-select
          v-if="form.region"
          v-model="form.region2"
          placeholder="请选择二级品类"
        >
          <el-option
            v-for="(item, index) in regionList2"
            :key="index"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品价钱">
        <el-input v-model="form.price" class="input_3"></el-input>
      </el-form-item>
      <el-form-item label="商品库存">
        <el-input v-model="form.stock" class="input_3"></el-input>
      </el-form-item>

      <el-form-item label="商品图片">
        <el-upload
          action="/api/product/upload.do"
          :on-success="handleAvatarSuccess"
          list-type="picture"
          :auto-upload="true"
          name="upload_file"
          class="upload-demo"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>

      <el-form-item label="商品详情">
        <el-input
          type="textarea"
          :rows="2"
          width="200px"
          class="textarea"
          placeholder="请输入内容"
          v-model="form.detail"
        >
        </el-input>
      </el-form-item>

      <el-button @click="butList">提交</el-button>
    </el-form>
  </div>
</template>

<script>
import { category, addDity } from "../request/http"; //商品添加 二级菜单
export default {
  data() {
    return {
      form: {
        id: "11",
        name: "1",
        subtitle: "1",
        price: "1",
        stock: "1",
        detail: "1",
        region: "1",
        categoryId: "1",
        subImages: "1",
        status: "1",
      },
      regionList1: [], //一级菜单
      regionList2: [], //二级菜单
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [],
        },
      ],
    };
  },
  mounted() {
    this.cataeList(); // 二级菜单的数据
    // this.button(); //添加的数据
  },
  methods: {
    //获取一级菜单的数据
    async cataeList() {
      const { data: res } = await category(`/category/get_category.do`);
      console.log(res);
      this.regionList1 = res.data; //一级菜单
    },
    // Change事件 一级
    regChange(v) {
      console.log(v);
      //   通过一级菜单遍历出二级菜单的数据
      this.regionList1.map((item, index) => {
        if (item.name == v) {
          category(`/category/get_category.do`, { categoryId: item.id }).then(
            (res2) => {
              console.log(res2);
              this.regionList2 = res2.data.data; //二级菜单
            }
          );
        }
      });
    },

    //点击提交 进行添加数据
    async butList() {
      const { data: res } = await addDity(
        `/product/save.do?categoryId=${this.form.categoryId}&name=${this.form.name}&subtitle=${this.form.subtitle}&subImages=${this.form.subImages}&detail=${this.form.detail}&price=${this.form.price}&stock=${this.form.stock}`
      );
      console.log(res);
      this.$message({
        message: "添加成功",
        type: "success",
      });
      this.$router.push({ path: "/tab" }); //添加成功后跳转到tab页面
    },
    //加载图片
    handleAvatarSuccess(response) {
      console.log(response);
      this.form.subImages = response.data.uri;
    },
  },
};
</script>

<style lang="scss">
.input_1 {
  width: 200px;
}
.input_2 {
  width: 400px;
}
.input_3 {
  width: 350px;
}
.textarea {
  width: 300px;
}
</style>